<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件管理 - 应急响应中心管理系统</title>
    <link rel="stylesheet" th:href="@{/lib/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/lib/bootstrap-icons/font/bootstrap-icons.css}">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <th:block th:replace="~{fragments/header :: navbarStyles}"></th:block>
    
    <!-- 高德地图API -->
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "bd7cfe5378f27ad4720f0279a1b184a7",
      };
    </script>
    <script src="https://webapi.amap.com/maps?v=2.0&key=9c44b0918d292a11356bd716509f09c3"></script>
    
    <style>
        .status-badge {
            font-size: 0.8em;
        }
        .priority-high { background-color: #dc3545; }
        .priority-medium { background-color: #ffc107; }
        .priority-low { background-color: #28a745; }
        .severity-critical { background-color: #dc3545; }
        .severity-severe { background-color: #fd7e14; }
        .severity-moderate { background-color: #ffc107; }
        .severity-minor { background-color: #28a745; }
        .event-card {
            transition: transform 0.2s;
        }
        .event-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .filter-section {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .stats-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .event-delete-btn {
            transition: all 0.2s ease;
        }
        .event-delete-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
        }
        .alert.position-fixed {
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
    </style>
</head>
<body>
    <div th:replace="~{fragments/header :: navbar}"></div>
    <div class="container-fluid">
        <!-- 页面标题 -->
        <div class="row mb-4">
            <div class="col d-flex justify-content-between align-items-center">
                <div>
                    <h2><i class="bi bi-exclamation-triangle"></i> 事件管理</h2>
                    <p class="text-muted">管理和监控应急事件</p>
                </div>
                <div>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createEventModal">
                        <i class="bi bi-plus-circle"></i> 新建事件
                    </button>
                </div>
            </div>
        </div>

        <!-- 统计卡片 -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="stats-card">
                    <h4 id="totalEvents">0</h4>
                    <p>总事件数</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                    <h4 id="pendingEvents">0</h4>
                    <p>待处理事件</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                    <h4 id="inProgressEvents">0</h4>
                    <p>处理中事件</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                    <h4 id="resolvedEvents">0</h4>
                    <p>已解决事件</p>
                </div>
            </div>
        </div>

        <!-- 筛选区 -->
        <div class="filter-section">
            <div class="row">
                <div class="col-md-2">
                    <label class="form-label">事件状态</label>
                    <select class="form-select" id="statusFilter" onchange="applyFilters()">
                        <option value="">全部状态</option>
                        <option value="PENDING">待处理</option>
                        <option value="ASSIGNED">已分配</option>
                        <option value="IN_PROGRESS">处理中</option>
                        <option value="RESOLVED">已解决</option>
                        <option value="CLOSED">已关闭</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">优先级</label>
                    <select class="form-select" id="priorityFilter" onchange="applyFilters()">
                        <option value="">全部优先级</option>
                        <option value="LOW">低</option>
                        <option value="MEDIUM">中</option>
                        <option value="HIGH">高</option>
                        <option value="CRITICAL">紧急</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">严重程度</label>
                    <select class="form-select" id="severityFilter" onchange="applyFilters()">
                        <option value="">全部程度</option>
                        <option value="MINOR">轻微</option>
                        <option value="MODERATE">一般</option>
                        <option value="SEVERE">严重</option>
                        <option value="CRITICAL">特大</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">事件类型</label>
                    <select class="form-select" id="eventTypeFilter" onchange="applyFilters()">
                        <option value="">全部类型</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">处理人</label>
                    <select class="form-select" id="handlerFilter" onchange="applyFilters()">
                        <option value="">全部处理人</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">&nbsp;</label>
                    <div>
                        <button class="btn btn-outline-secondary" onclick="clearFilters()">
                            <i class="bi bi-x-circle"></i> 清除筛选
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 事件列表 -->
        <div class="row" id="eventsContainer">
            <!-- 事件卡片将在这里动态生成 -->
        </div>

        <!-- 分页 -->
        <div class="row mt-4">
            <div class="col">
                <nav aria-label="事件分页">
                    <ul class="pagination justify-content-center" id="pagination">
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- 事件详情模态框 -->
    <div class="modal fade" id="eventDetailModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">事件详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="eventDetailContent">
                    <!-- 事件详情内容将在这里动态生成 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 创建事件模态框 -->
    <div class="modal fade" id="createEventModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="bi bi-plus-circle"></i> 新建事件</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="createEventForm">
                        <div class="mb-3">
                            <label for="title" class="form-label">事件标题*</label>
                            <input type="text" class="form-control" id="title" required>
                        </div>
                        <div class="mb-3">
                            <label for="createEventTypeId" class="form-label">事件类型*</label>
                            <select class="form-select" id="createEventTypeId" required>
                                <option value="">请选择事件类型</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="description" class="form-label">事件描述</label>
                            <textarea class="form-control" id="description" rows="3"></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="location" class="form-label">事发地点</label>
                            <input type="text" class="form-control" id="location">
                            <div id="eventMap" style="width:100%;height:300px;margin-top:10px;border-radius:4px;"></div>
                            <input type="hidden" id="lnglat">
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="priority" class="form-label">优先级</label>
                                    <select class="form-select" id="priority">
                                        <option value="HIGH">高</option>
                                        <option value="MEDIUM" selected>中</option>
                                        <option value="LOW">低</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="severity" class="form-label">严重程度</label>
                                    <select class="form-select" id="severity">
                                        <option value="CRITICAL">紧急</option>
                                        <option value="MAJOR">重大</option>
                                        <option value="MINOR" selected>一般</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="submitCreateEvent()">创建事件</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 任务报告模态框 -->
    <div class="modal fade" id="taskReportsModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="bi bi-file-text"></i> 任务报告</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div id="taskReportsContent">
                        <!-- 任务报告内容将在这里动态生成 -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteEventModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-danger">
                        <i class="bi bi-exclamation-triangle"></i> 确认删除事件
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-warning">
                        <i class="bi bi-exclamation-triangle"></i>
                        <strong>警告：</strong>此操作不可撤销！
                    </div>
                    <p>确定要删除事件 <strong id="deleteEventTitle"></strong> 吗？</p>
                    <p class="text-muted">删除后将同时删除：</p>
                    <ul class="text-muted">
                        <li>事件的所有响应记录</li>
                        <li>事件的所有资源指派</li>
                        <li>事件的所有任务报告</li>
                        <li>事件的所有相关数据</li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                        <i class="bi bi-trash"></i> 确认删除
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入认证管理脚本 -->
    <script th:src="@{/js/auth.js}"></script>
      <script th:src="@{/js/navbar.js}"></script>
    <script th:src="@{/lib/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/js/event.js}"></script>
    <script th:src="@{/js/permission.js}"></script>

</body>
</html> 
